import { Fragment, useState } from "react";
import { DragProps } from "../hoc/withDragEvent";
import getAnchor from "../utils/getAnchor";
import Anchor from "./Anchor";

export default function Circle(props: DragProps) {
  const { x, y, onMouseDown } = props;
  const cx = Number(x) + 50 + "";
  const cy = Number(y) + 50 + "";
  const [isInside, setIsInside] = useState(false);
  return (
    <Fragment>
      <circle
        cx={cx}
        cy={cy}
        r="50"
        fill="blue"
        onMouseEnter={() => setIsInside(true)}
        onMouseLeave={() => setIsInside(false)}
        onMouseDown={(e) => onMouseDown(e)}
      ></circle>

      <Anchor {...getAnchor(x, y, "100", "100")} isInside={isInside}></Anchor>
    </Fragment>
  );
}
